<template>
	<view>
		<view style="position: absolute;z-index: 101;max-height: 70vh;min-height: 50vh;" @touchmove.stop.prevent="">
			<uni-popup ref="popup" type="bottom" :background-color="bgColor">
				<view class="depart-sure-cancel" style="background: var(--bg-center-color)">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view
							style="height: 28rpx;width: 10rpx;background-color: var(--grey-text);border-radius: 10rpx;">
						</view>
						<view style="font-size: 28rpx;font-weight: 600;color: var(--white-text);margin-left: 20rpx;">
							充值：{{formatNumber(businessData.memberMoney)||0}}
						</view>
						<view style="font-size: 28rpx;font-weight: 600;color: var(--white-text);margin-left: 20rpx;">
							赠送：{{formatNumber(businessData.chargeSendMoney)||0}}
						</view>
					</view>
					<view style="color: var(--grey-text);font-size: 28rpx;" @click="closePopup">关闭</view>
				</view>
				<view class="line-split"></view>
				<scroll-view scroll-y style="max-height: 70vh;min-height: 50vh;" :show-scrollbar="false">
					<view style="padding-bottom: 50rpx;">
						<!-- 营业充值 -->
						<view style="padding: 0 30rpx;" v-if="count_total_business.length > 0">
							<view
								style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
								<view class="performance-detail-content-detail">
									<view class="detail-title">
										<view style="display: flex;flex-direction: row;">
											<view class="detail-name font-28">
												营业充值：{{formatNumber(businessData.memberMoneyList.chargeMoney)||0}}
											</view>
										</view>
									</view>
									<view class="line-split"></view>
									<view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;"
										v-for="(item,index) in count_total_business" :key="index">
										<view class="detail-item" :class="{'align-end':index1 == 1}"
											v-for="(detail,index1) in item" :key="index1">
											<view class="label">{{detail.payment_name}}：</view>
											<view class="value">{{formatNumber(detail.payment_money)||0}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 非营充值 -->
						<view style="padding: 0 30rpx;" v-if="count_total_no_business.length > 0">
							<view
								style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
								<view class="performance-detail-content-detail">
									<view class="detail-title">
										<view style="display: flex;flex-direction: row;">
											<view class="detail-name font-28">
												非营充值：{{formatNumber(businessData.memberMoneyList.chargeNoMoney)||0}}
											</view>
										</view>
									</view>
									<view class="line-split"></view>
									<view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;"
										v-for="(item,index) in count_total_no_business" :key="index">
										<view class="detail-item" :class="{'align-end':index1 == 1}"
											v-for="(detail,index1) in item" :key="index1">
											<view class="label">{{detail.payment_name}}：</view>
											<view class="value">{{formatNumber(detail.payment_money)||0}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view style="padding: 0 30rpx;margin-top: 30rpx;"  v-if="chargeListType.length>0">
							<view
								style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
								<view class="depart-title-content" style="padding-top: 30rpx;">
									<view class="depart-title-content-name">会员类型</view>
									<view class="depart-title-content-desk">充值金额</view>
									<view class="depart-title-content-money">赠送金额</view>
								</view>
								
								<view class="depart-title-content"
									v-for="(item,index) in chargeListType" :key="index">
									<view class="performance-detail-content" style="flex: 1;margin-top: 0;">
										<view class="depart-title-content-name">
											{{item.member_type_name}}({{item.charge_num}}次)
										</view>
										<view class="depart-title-content-desk">
											{{formatNumber(item.charge_money)}}
										</view>
										<view class="depart-title-content-money">
											<view>{{formatNumber(item.gift_money)}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view style="text-align: center;font-size: 24rpx;color: var(--grey-text);padding: 30rpx 0;">
							更多内容请移步至分店APP助手查看
						</view>
<!--						<view style="display: flex;flex-direction: row;justify-content: center;">-->
<!--							<view class="business-btn" @click="goAnalyse('member')">会员排行</view>-->
<!--						</view>-->
					</view>
				</scroll-view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tradeMemberPopup",
		data() {
			return {
				bgColor: 'var(--bg-color)',
				businessData: {},
				count_total_business: [],
				count_total_no_business: [],
				betweenTime: [],
				chargeListType: []
			}
		},
		mounted() {

		},
		methods: {
			goAnalyse(type) {
				this.closePopup()
				if (type == 'member') {
					uni.navigateTo({
						url: '/pages/app_helper/member_analysis/charge_top'
					})
					return
				}
			},
			opens(item, time) {
				this.count_total_business = this.groupByThree(item.memberMoneyDetails.chargeMoneyList)
				this.count_total_no_business = this.groupByThree(item.memberMoneyDetails.chargeNoList)
				this.businessData = item
				this.betweenTime = time
				this.getChargeList()
				this.$refs.popup.open()
			},

      /**
       * 获取充值列表
       * @return {Promise<void>}
       */
			getChargeList() {
        const self = this
        const params = {
          begin_date: this.betweenTime[0] + ' 12:00:00',
          end_date: this.betweenTime[1] + ' 12:00:00'
        }
        this.$commonJs.queryCache('/app/admin/getMemberTypeCharge', params, {
          before() {
          },
          success(res) {
            try {
              const {
                code,
                data,
                msg,
                server_ip
              } = res
              self.chargeListType = data
            } catch (error) {
              //TODO handle the exception
              self.$commonJs.showMessage(error)
            }
          },
          fail(err) {
            self.$commonJs.logger.debug(err, 'error')
          }
        }, {"X-Merchant-ID": self.$commonJs.systemConfig.groupShopList[self.$commonJs.systemConfig.shopIndex].shop_id})
			},

			
			closePopup() {
				this.$refs.popup.close()
			},
			groupByThree(array) {
				const result = [];
				for (let i = 0; i < array.length; i += 2) {
					result.push(array.slice(i, i + 2));
				}
				return result;
			},

			/**
			 * 格式化处理
			 * @param money
			 * @returns {string|*}
			 */
			formatNumber(money) {
				// 判断是否为整数（即小数部分是否为 0）
				if (money % 1 === 0) {
					return Number(money).toString()
				} else {
					return Number(money).toFixed(2)
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.business-btn {
		height: 60rpx;
		width: 170rpx;
		background-color: #ff6f3f;
		border-radius: 20rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		font-weight: 600;
	}

	.depart-sure-cancel {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.performance-detail-content-detail {
		border-radius: 10rpx;
		padding: 0 10rpx;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: var(--white-text);
		margin-top: 30rpx;
	}

	.detail-name {
		font-size: 28rpx;
		font-weight: 600;
		color: var(--white-text)
	}

	.detail-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 68rpx;
		align-items: center;
		line-height: 68rpx;
	}

	.detail-body {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
	}

	.label {
		font-size: 24rpx;
		color: var(--grey-text);
	}

	.value {
		font-size: 24rpx;
		color: var(--white-text);
		font-weight: 600;
	}

	.detail-item {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.align-end {
		justify-content: flex-end;
	}

	.depart-title-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-top: 16rpx;
		font-size: 26rpx;
		color: var(--grey-text);
	}

	.depart-title-content-name {
		width: 40%;
		display: flex;
		flex-direction: row;
		justify-content: start;
	}

	.depart-title-content-desk {
		width: 30%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.depart-title-content-money {
		width: 30%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.performance-detail {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.performance-detail-content {
		height: 50rpx;
		background-color: var(--bg-center-color);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: var(--white-text);
		margin-top: 20rpx;
	}



	.performance-detail-content-desk {
		width: 20%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.performance-detail-content-money {
		width: 40%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		text-align: right;
	}
</style>